<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>weather</title>
        <link rel="stylesheet" href="./CSS/weather.css" />
        <link rel="stylesheet" href="./CSS/livingIndex.css" />

        <script src="./js/weather.js"></script>
        <script src="./js/livingIndex.js"></script>
    </head>
    <body onload="dealWithData()">
        <h1>
            <img
                src="./img/location.png"
                width="50px"
                alt="城市定位"
            />城市：<span id="position">安仁</span>
        </h1>
        <div id="wea">
            <ul class="t">
                <li class="sky" onclick="obtainLivingIndex1()">
                    <h1 class="date">18日（今天）</h1>
                    <p class="wea">小雨转中雨</p>
                    <p class="tem"><span>34</span>/<i>26℃</i></p>
                    <p class="win">
                        <span>南风</span>
                        <i>&lt;3级</i>
                    </p>
                    <div class="slid"></div>
                </li>
                <li class="sky" onclick="obtainLivingIndex2()">
                    <h1 class="date">19日（明天）</h1>
                    <p class="wea">大雨转中雨</p>
                    <p class="tem"><span>27</span>/<i>24℃</i></p>
                    <p class="win">
                        <span>南风</span>
                        <i>&lt;3级</i>
                    </p>
                    <div class="slid"></div>
                </li>
                <li class="sky" onclick="obtainLivingIndex3()">
                    <h1 class="date">20日（后天）</h1>
                    <p class="wea">大雨转小雨</p>
                    <p class="tem"><span>27</span>/<i>24℃</i></p>
                    <p class="win">
                        <span>南风</span>
                        <i>&lt;3级</i>
                    </p>
                    <div class="slid"></div>
                </li>
                <li class="sky" onclick="obtainLivingIndex4()">
                    <h1 class="date">21日（周三）</h1>
                    <p class="wea">小雨转多云</p>
                    <p class="tem"><span>28</span>/<i>23℃</i></p>
                    <p class="win">
                        <span>南风</span>
                        <i>&lt;3级</i>
                    </p>
                    <div class="slid"></div>
                </li>
                <li class="sky" onclick="obtainLivingIndex5()">
                    <h1 class="date">22日（周四）</h1>
                    <p class="wea">阴转小雨</p>
                    <p class="tem"><span>29</span>/<i>23℃</i></p>
                    <p class="win">
                        <span>南风</span>
                        <i>&lt;3级</i>
                    </p>
                    <div class="slid"></div>
                </li>
                <li class="sky" onclick="obtainLivingIndex6()">
                    <h1 class="date">23日（周五）</h1>
                    <p class="wea">小雨转阴</p>
                    <p class="tem"><span>29</span>/<i>23℃</i></p>
                    <p class="win">
                        <span>南风</span>
                        <i>&lt;3级</i>
                    </p>
                    <div class="slid"></div>
                </li>
                <li class="sky" onclick="obtainLivingIndex7()">
                    <h1 class="date">24日（周六）</h1>
                    <p class="wea">中雨转大雨</p>
                    <p class="tem"><span>30</span>/<i>23℃</i></p>
                    <p class="win">
                        <span>南风</span>
                        <i>&lt;3级</i>
                    </p>
                    <div class="slid"></div>
                </li>
            </ul>
        </div>

        <div id="space"></div>
        <h2>
            <img src="./img/live.png" width="50px" alt="生活指数" />生活指数：
        </h2>
        <div id="show">
            <ul id="clearfix">
                <li class="li">
                    <em>感冒指数：</em>
                    <span>少发</span>
                    <p>感冒机率较低，避免长期处于空调屋中。</p>
                </li>
                <li class="li">
                    <em>运动指数：</em>
                    <span>较不宜</span>
                    <p>有降水，推荐您在室内进行休闲运动。</p>
                </li>
                <li class="li">
                    <em>过敏指数：</em>
                    <span>不易发</span>
                    <p>除特殊体质，无需担心过敏问题。</p>
                </li>
                <li class="li">
                    <em>穿衣指数：</em>
                    <span>热</span>
                    <p>适合穿T恤、短薄外套等夏季服装。</p>
                </li>
                <li class="li">
                    <em>洗车指数：</em>
                    <span>不宜</span>
                    <p>有雨，雨水和泥水会弄脏爱车。</p>
                </li>
                <li class="li">
                    <em>紫外线指数：</em>
                    <span>最弱</span>
                    <p>辐射弱，涂擦SPF8-12防晒护肤品。</p>
                </li>
            </ul>
        </div>
    </body>
</html>
